<%@page import="com.home.qh.model.Port"%>
<%@page import="com.home.qh.model.Customer"%>
<%@page import="java.util.List"%>
<%@ include file="/common/taglibs.jsp"%>
<%@page import="com.home.qh.model.Voyage" %>
<%
	List<Voyage> listvoyage = (List<Voyage>)request.getAttribute("voyageList");
	List<Customer> listCustomer = (List<Customer>) request.getAttribute("customerList");
	List<Port> listPort = (List<Port>) request.getAttribute("portList");
%>
<head>
    <title><fmt:message key="Booking.Title"/></title>
    <meta name="heading" content="<fmt:message key='Booking.Title'/>"/>
    <meta name="menu" content="BookingListMenu"/>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.button.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.datepicker.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.autocomplete.js'/>"></script>
    <style>	#toolbar {padding: 10px 5px;}</style>
</head>

<div class="buttons" style="float:left;padding-right:15px;margin-top: 20px;">
	<form:form commandName="bookingSearch" method="post" action="view_booking.html">
		<fieldset class="ui-widget ui-widget-content" style="width: 100%; ">
			<legend class="ui-widget-header ui-corner-all">
				<fmt:message key="Booking.SearchForm" />
			</legend>
			<table>
				<tr>			
					<td><appfuse:label styleClass="desc" key="Booking.Voyage"/></td>
			    	<td>
			    		<input name="voyageName" id="voyageName" class="select ui-widget-content ui-corner-all" value=""/>
			    		<input type="hidden" name="voyageId" id="voyageId" value=""/>
			    	</td>
				</tr>
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.Shipper"/></td>
					<td>
						<input name="shipperName" id="shipperName" class="select ui-widget-content ui-corner-all" value=""/>
			    		<input type="hidden" name="shipperId" id="shipperId" value=""/>
					</td>
					
					<td><appfuse:label styleClass="desc" key="Booking.Consignee"/></td>
					<td>
						<input name="consigneeName" id="consigneeName" class="select ui-widget-content ui-corner-all" value=""/>
			    		<input type="hidden" name="consigneeId" id="consigneeId" value=""/>
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.PortLoading"/></td>
					<td>
						<input name="portLoadingName" id="portLoadingName" class="select ui-widget-content ui-corner-all" value=""/>
			    		<input type="hidden" name="portLoadingId" id="portLoadingId" value=""/>
					</td>
					
					<td><appfuse:label styleClass="desc" key="Booking.PortDischarge"/></td>
					<td>
						<input name="portDischargeName" id="portDischargeName" class="select ui-widget-content ui-corner-all" value=""/>
			    		<input type="hidden" name="portDischargeId" id="portDischargeId" value=""/>
					</td>
				</tr>
			</table>
			
			<button type="button" class="negative" id="searchForm_button_reset"  onclick="resetFields();">
				<fmt:message key="button.reset" />
			</button>
			<button type="submit" class="search" id="searchForm_button_search" name="search" >
				<fmt:message key="button.search" />
			</button>
			
		</fieldset>
	</form:form>
</div>

<div class="clear"></div>

	<display:table name="bookingList" cellspacing="0" cellpadding="0" defaultsort="1" id="bookingData" pagesize="2" class="listing-tbl" export="true" >
	    <display:column property="bookingNo" sortable="true" escapeXml="true" titleKey="Booking.BookingNo" style="width: 30%" 
	    url="/booking/edit_booking.html?from=list" paramId="id" paramProperty="id"/>
		<display:column property="shipper.fullName" sortable="true" titleKey="Booking.Shipper" style="width: 30%"/>
		<display:column property="consignee.fullName" sortable="true" titleKey="Booking.Consignee" style="width: 30%"/>
	    
	    <display:setProperty name="paging.banner.item_name" value="voyageData"/>
	    <display:setProperty name="paging.banner.items_name" value="Voyage"/>
	
	    <display:setProperty name="export.excel.filename" value="Voyage List.xls"/>
	    <display:setProperty name="export.csv.filename" value="Voyage List.csv"/>
	    <display:setProperty name="export.pdf.filename" value="Voyage List.pdf"/>
	</display:table>
	
<span id="toolbar" class="ui-widget-header ui-corner-all">
	<button type="button" style="margin-right: 5px" id="addBooking"
        onclick="location.href='<c:url value="/booking/edit_booking.html?method=Add&from=list"/>'">
        <fmt:message key="button.add" />
    </button>

    <button type="button" id="doneVessel" onclick="location.href='<c:url value="/mainMenu.html"/>'">
        <fmt:message key="button.done" />
    </button>
</span>

<script type="text/javascript">
	var voyageLists = [
		<%for(int i= 0;i<listvoyage.size()-1;i++){%>
			{id: "<%=listvoyage.get(i).getId()%>",value:"<%=listvoyage.get(i).getName()%>"},
		<%}%>
		{id: "<%=listvoyage.get(listvoyage.size()-1).getId()%>",value:"<%=listvoyage.get(listvoyage.size()-1).getName()%>"}
	];
	
	var shipperLists = [
		<%for(int i= 0;i<listCustomer.size()-1;i++){%>
			{id: "<%=listCustomer.get(i).getId()%>",value:"<%=listCustomer.get(i).getFullName()%>"},
		<%}%>
		{id: "<%=listCustomer.get(listCustomer.size()-1).getId()%>",value:"<%=listCustomer.get(listCustomer.size()-1).getFullName()%>"}
	];
	
	var portLists = [
		<%for(int i= 0;i<listPort.size()-1;i++){%>
		{id: "<%=listPort.get(i).getId()%>",value:"<%=listPort.get(i).getName()%>"},
		<%}%>
		{id: "<%=listPort.get(listPort.size()-1).getId()%>",value:"<%=listPort.get(listPort.size()-1).getName()%>"}
	];
	
	$(function() {
		$("#doneVessel" ).button({
            icons: {
                primary: "ui-icon-home"
            }
        });
		
		$("#addBooking" ).button({
            icons: {
                primary: "ui-icon-circle-plus"
            }
        });
		
		$("#searchForm_button_reset" ).button({
            icons: {
                primary: "ui-icon-trash"
            }
        });
		
		$("#searchForm_button_search" ).button({
            icons: {
                primary: "ui-icon-circle-zoomin"
            }
        });
		
		$('#voyageName').val('<%=(String)request.getAttribute("voyageName") %>');
		$('#voyageId').val('<%=(String)request.getAttribute("voyageId") %>');
		
		$("#voyageName").autocomplete({
			minLength: 0,
			source: voyageLists,
			focus: function( event, ui ) {
				$( "#voyageName" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#voyageName').val(ui.item.value );
				$("#voyageId").val(ui.item.id);
				return false;
			},
			change: function(event, ui){
				if ($('#voyageName').val().length==0)
					$("#voyageId").val('');
			}
		});
		
		$('#shipperName').val('<%=(String)request.getAttribute("shipperName") %>');
		$('#shipperId').val('<%=(String)request.getAttribute("shipperId") %>');
		
		$("#shipperName").autocomplete({
			minLength: 0,
			source: shipperLists,
			focus: function( event, ui ) {
				$( "#shipperName" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#shipperName').val(ui.item.value );
				$("#shipperId").val(ui.item.id);
				return false;
			},
			change: function(event, ui){
				if ($('#shipperName').val().length==0)
					$("#shipperId").val('');
			}
		});
		
		$('#consigneeName').val('<%=(String)request.getAttribute("consigneeName") %>');
		$('#consigneeId').val('<%=(String)request.getAttribute("consigneeId") %>');
		
		$("#consigneeName").autocomplete({
			minLength: 0,
			source: shipperLists,
			focus: function( event, ui ) {
				$( "#consigneeName" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#consigneeName').val(ui.item.value );
				$("#consigneeId").val(ui.item.id);
				return false;
			},
			change: function(event, ui){
				if ($('#consigneeName').val().length==0)
					$("#consigneeId").val('');
			}
		});
		
		$('#portLoadingName').val('<%=(String)request.getAttribute("portLoadingName") %>');
		$('#portLoadingId').val('<%=(String)request.getAttribute("portLoadingId") %>');
		
		$("#portLoadingName").autocomplete({
			minLength: 0,
			source: portLists,
			focus: function( event, ui ) {
				$( "#portLoadingName" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#portLoadingName').val(ui.item.value );
				$("#portLoadingId").val(ui.item.id);
				return false;
			},
			change: function(event, ui){
				if ($('#portLoadingName').val().length==0)
					$("#portLoadingId").val('');
			}
		});
		
		$('#portDischargeName').val('<%=(String)request.getAttribute("portDischargeName") %>');
		$('#portDischargeId').val('<%=(String)request.getAttribute("portDischargeId") %>');
		
		$("#portDischargeName").autocomplete({
			minLength: 0,
			source: portLists,
			focus: function( event, ui ) {
				$( "#portDischargeName" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#portDischargeName').val(ui.item.value );
				$("#portDischargeId").val(ui.item.id);
				return false;
			},
			change: function(event, ui){
				if ($('#portDischargeName').val().length==0)
					$("#portDischargeId").val('');
			}
		});
	});
	 highlightTableRows("bookingData");
	 
	 
</script>